import React, { Fragment } from 'react';

import { Form, Alert } from 'antd';
import { size } from 'lodash';
import moment from 'moment';
import xss from 'xss';

// 修改入职时间表单
const ChangeEntryDateEnd = ({ data = {} }) => {
    // const { setFieldsValue } = form;
    const { entryDate, applyEntryDate, applyEntryDateReason, applyEntryDateStatus } = data;

    // useEffect(() => {
    //     setFieldsValue({
    //         entryDate: size(applyEntryDate) > 0 ? moment(applyEntryDate) : undefined
    //     });
    //     // eslint-disable-next-line react-hooks/exhaustive-deps
    // }, [applyEntryDate]);

    return (
        <Fragment>
            <Alert
                message="入职时间已确认，你无需重复操作"
                type="warning"
                showIcon
                style={{ border: 0, margin: '-12px' }}
            />
            <br />
            {size(applyEntryDate) > 0 && applyEntryDateStatus === 'finished' && (
                <Form.Item label="期望入职日期" style={{ margin: '-8px 0' }}>
                    {applyEntryDate ? moment(applyEntryDate).format('YYYY-MM-DD') : '-'}
                </Form.Item>
            )}
            {size(applyEntryDateReason) > 0 && applyEntryDateStatus === 'finished' && (
                <Form.Item label="修改原因" style={{ margin: '14px 0' }}>
                    <div
                        style={{ wordBreak: 'break-all', display: 'inline' }}
                        // eslint-disable-next-line react/no-danger
                        dangerouslySetInnerHTML={{
                            __html: xss(applyEntryDateReason?.replace(/\s+/g, '<br>'))
                        }}
                    />
                </Form.Item>
            )}
            <Form.Item label="确认入职时间" style={{ margin: '14px 0' }}>
                {entryDate ? moment(entryDate).format('YYYY-MM-DD') : '-'}
            </Form.Item>
        </Fragment>
    );
};

export default ChangeEntryDateEnd;
